<template>
    <div>
        <h1>地址列表</h1>
        <el-table
         v-if="bol"
         :data="list" 
         style="width: 100%"
         >
            <el-table-column fixed prop="id" label="id" width="150" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="area" label="区域" />
            <el-table-column prop="address" label="详细地址" width="600" />
            <el-table-column prop="tel" label="电话" />
            <el-table-column prop="tips" label="备注" />
            <el-table-column prop="bol" label="默认地址">
                <template #default="scope">
                <!-- {{ scope.row.bol }} -->
                    <el-button v-if="scope.row.bol==0" link type="primary" size="small" @click="setMo(scope.row.id)">设为默认地址</el-button>
                    <span v-else>默认地址</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                    <el-button link type="primary" size="small" 
                    >编辑</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- <table v-if="bol" border="1">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>区域</th>
                <th>详细地址</th>
                <th>手机号</th>
                <th>备注</th>
                <th></th>
                <th>操作</th>
            </tr>
            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.area }}</td>
                <td>{{ item.address }}</td>
                <td>{{ item.tel }}</td>
                <td>{{ item.tips }}</td>
                <td>{{ item.bol>0?'默认地址':'不是默认地址' }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table> -->

        <div v-else>
            <p>还没有地址，<router-link to="/add">新增地址</router-link></p>
        </div>

        <el-pagination 
        background 
        layout="prev, pager, next" 
        :total="total"
        :page-size="3"
        @current-change="changePage"
         />
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue'
let bol = ref(false);
let list = ref([]);

//设置分页数据 
let currPage = ref(1); //设置当前第几页
let currNum = ref(3); //设置一页多少条数据 

//设置总页数
let total = ref(0);

let getTotal = ()=>{
    axios.get('/api/getTotal').then(res=>{
        console.log(res.data);
        //获取总页数
        let num = res.data.data[0]['count(*)'];
        total.value = num;
    });
};
//参数page是当前页数，num是每页条数
let getData = (page,num)=>{
    //请求接口
    axios.get(`/api/getAddress/${page}/${num}`).then(res=>{
        console.log(res.data);
        //判断返回的数据内容，如果数据长度为0，则返回false，显示空数据状态，否则返回true，显示数据列表
        if(res.data.length){
            bol.value = true;
            list.value = res.data;
        }else{
            bol.value = false;
        }
    });
};
onMounted(()=>{
    getData(currPage.value,currNum.value);
    getTotal();
});

//设置为默认地址
let setMo = (id)=>{
    console.log(id);
    axios.get('/api/setmo/'+id).then(res=>{
        getData();
    });
};

//点击分页
let changePage = p=>{
    console.log(p);
    currPage.value = p;
    getData(currPage.value,currNum.value);
};
</script>

<style lang="scss" scoped>


</style>